<template>
	<div id="contents" :style="{ display: 'block', backgroundColor: 'rgb(255, 174, 0)' }">
		<div id="spiral-con">
			<div id="spiral-circle"></div>
			<div id="spiral-home">
				<!-- The Spiral items will be dynamically inserted here -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';

const layers = 8;
let totalItems;
let textArrayLength;
let textArray;
let totalElements = [];

function SpiralItem(layerIndex, itemIndex, totalItems, layers, text) {
	this.element = document.createElement('p');
	this.div = document.createElement('div');
	this.div.innerHTML = text || '';
	this.element.appendChild(this.div);
	this.rotate = (itemIndex + totalItems * (layers - 1 - layerIndex)) * -(360 / totalItems) - 90;
	this.scale = 1 - (itemIndex + totalItems * (layers - 1 - layerIndex)) / totalItems / layers;
	this.scale *= this.scale;
	this.element.style.transform = 'rotate(0deg) scale(0)';
	this.element.style.transition = 'transform 3s';
	this.element.style.color = '#fff'; // Set text color explicitly
}

SpiralItem.prototype.start = function () {
	this.element.style.transform = `rotate(${this.rotate}deg) scale(${this.scale})`;
};

function initSpiral() {
	const homeElement = document.getElementById('spiral-home');
	totalItems = 40 * layers;
	textArray = "ROBERTSMITHSONAMERICANARTISTSMITHSONISMOSTWELLKNOWNFORHISPROVOCATIVEEARTHWORKTHESPIRALJETTYHEGAINEDINTERNATIONALRECOGNITIONFORHISGROUNDBREAKINGARTWHICHWASNOTLIMITEDBYGENREORMATERIALSASWELLASFORHISCRITICALWRITINGSTHATCHALLENGEDTRADITIONALCATEGORIESOFARTBETWEENTHEYEARSOF19641973".split(
		''
	);
	textArrayLength = textArray.length;
	totalElements = [];
	for (let layerIndex = 0; layerIndex < layers; layerIndex++) {
		for (let itemIndex = 0; itemIndex < 40; itemIndex++) {
			const elementIndex = 40 - itemIndex + 40 * layerIndex - 1;
			const textIndex = Math.min(elementIndex - 1, textArrayLength);
			const item = new SpiralItem(layerIndex, itemIndex, 40, layers, textArray[textIndex]);
			homeElement.appendChild(item.element);
			totalElements[elementIndex] = item;
		}
	}
}

function startSpiral() {
	setTimeout(() => {
		for (let elementIndex = 0; elementIndex < totalItems; elementIndex++) {
			const currentElement = totalElements[elementIndex];
			currentElement.start();
		}
	}, 2000);
	setTimeout(() => {
		document.getElementById('spiral-home').classList.add('spiral-rotate');
	}, 3000);
}

onMounted(() => {
	initSpiral();
	startSpiral();
});
</script>

<style scoped lang="scss">
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	overflow: hidden;
}

#contents {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	overflow: hidden;
	transform-style: preserve-3d;
}

#spiral-con {
	pointer-events: none;
}

#spiral-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 550px;
	height: 550px;
	border-radius: 50%;
	margin: -265px 0 0 -275px;
	z-index: 1;
}

#spiral-home {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 20px;
	width: 10px;
	height: 10px;
	margin: 0;
	font-weight: 700;
	color: #fff;
	z-index: 3;
}

#spiral-home > p {
	transform-origin: 100% 50%;
	transition: transform 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	width: 192px;
	height: 48px;
	position: absolute;
	left: -192px;
	top: -24px;
	color: #fff; // Ensure text color is white
}

#spiral-home > p > div {
	width: 48px;
	height: 48px;
	transform: rotate(-95deg);
	font-size: 36px;
	text-align: center;
}

.spiral-rotate {
	animation: rotate-spiral 10s linear 0s infinite;
	width: 100vw !important;
	height: 100vh !important;
}

.spiral-rotate-pause {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}

@-webkit-keyframes rotate-spiral {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotate-spiral {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes rotate-spiral {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
	}
}

@keyframes rotate-spiral {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
